<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>添加 删除-构造函数中的对象</title>
</head>
<style>
    body {
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        text-decoration: none;
        font-family: "华文楷体";
    }
</style>
<script>
    // 构造函数
    function Person(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }

    // 给构造函数原型添加一个result方法
    Person.prototype.result = function () {
        return "name:" + this.name + "age:" + this.age + "gender:" + this.gender;
    }
    // 对象实例化
    let person1 = new Person("小芳", 10, "男")
    let person2 = new Person("小红", 16, "女")
    let person3 = new Person("小明", 19, "男")
    let person4 = new Person("小兰", 21, "女")

    // document.write(person3.result())
    // 定义一个数组用来装Person的对象
    let arr = [person1, person2, person3, person4]

    {
        // unshift方法是在数组开头添加元素,shift方法是删除数组开头的元素(返回值是被删除的元素)
        // 构造一个构造函数用来封装 添加操作的方法
        function Unshift(Arr) {
            // 在数组开头添加2个元素
            let newArr = Arr.unshift(new Person("小花", 12, "女"),new Person("小鸡", 22, "男"))
            document.write("已添加元素:"+ new Person("小鸡", 22, "男").name + "<br>")
            document.write("已添加元素:"+ new Person("小花", 12, "女").name + "<br>")
            // 返回添加过后的长度
            document.write("当前长度"+newArr+"<br>")// 返回已经添加后的数组
            return Arr;
        }

        // 实例化一个对象method(也调用给了实参了)
        let method = new Unshift(arr)
        // 遍历输出
        method.forEach(function (result, index, object) {
            document.write(object[index].result() + "<br>")
        })
    }

    // {}--作用是将整个删除操作装到一起
    {
        //pop方法是删除数组末尾的元素,shift方法是删除数组开头的元素(返回值是被删除的元素)
        // 构造一个构造函数用来封装 删除操作的方法
        function Pop(Arr) {
            // 循环进行删除最后一个元素(Arr.length - 1是因为删除一个后Arr的长度会减1)
            for (let i = 0; i < Arr.length - 1; i++) {
                // pop返回的值是被删除的值
                let newArr = Arr.pop()
                document.write("已删除第" + Number(Arr.length + 1) + "个元素:" + newArr.name + "<br>")
            }
            // 返回已经删除后的数组
            return Arr;
        }

        // 实例化一个对象method(也调用给了实参了)
        let method = new Pop(arr)
        // 遍历方法一
        method.forEach(function (result, index, object) {
            document.write(object[index].result() + "<br>")
        })

        // 遍历方法二
        // for (let i=0;i<method.length;i++){
        //     document.write(method[i].result()+"<br>")
        // }
    }
</script>
<body>
</body>
</html>